<template>
	<view>
		<u-popup v-model="open" :mode="params.mode" :border-radius="params.borderRadius" 
		:closeable="params.closeable" :close-icon-pos="params.closeIconPos" @close="close" >
				<view class="frame">
					<view class="submit-frame" @click="close">确定</view>
					<view class="flexcenter frame-title">{{title}}</view>
					<view style="width: 686rpx;z-index: 10;margin-left: 32rpx;margin-top: 30rpx;">
					<u-search placeholder="搜索手机号/邮箱/账号添加" v-model="keyword" :show-action="false" :height="68"></u-search>
					<!-- 全选按钮 -->
					<view class="flexalign checked-frame" v-if="type == 3">
						<text>全选</text>  
						<u-checkbox
							style="margin-left: 22rpx;"
							@change="checkboxChangeAll" 
							v-model="checked" 
							:name="'all'"
							:shape="'circle'"
						></u-checkbox>
					</view>
					<!-- 列表 -->
					<scroll-view scroll-y="true" :style="{'height': type == 3? '768rpx':'820rpx'}" class="scroll-frame">
						<view class="flexalign" style="margin-top: 32rpx;" v-for="(item,index) in list" :key="index">
							<image :src="item.avatar" class="icon"></image>
							<text class="name-text">{{item.name}}</text>
							<u-checkbox 
								@change="checkboxChange" 
								v-model="item.checked" 
								:name="index"
								:shape="'circle'"
							></u-checkbox>
						</view>
					</scroll-view>
					</view>
				</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"peopleAddPop",
		props:{
			// 是否打开弹窗
			openPop:{
				type:Boolean,
				default:false
			},
			// 0:添加群成员 1:移除群成员 2:选择用户  3:接收人
			type:{
				type:Number,
				default:0
			},
			// 选择模式，0：多选  1:单选
			model:{
				type:Number,
				default:0
			},
			// 联系人列表
			list: {
				type: Array,
				default: []
			},
			
		},
		data() {
			return {
				keyword:'',
				open:false,
				params:{
					mode:"bottom",
					borderRadius:24,
					closeable:true,
					closeIconPos:"top-left"
				},
				radioIndex:null,
				checkedList:[],
				checked:false,		//全选
			};
		},
		watch: {
			// New: 新值 | Old: 老值
			openPop(New, Old) {
				this.open = New
				console.log(`新值:${New} ——— 老值:${Old}`)
			},
			list: {
				handler(value) { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
					// console.log('数组变化',value)
					let checkedList = []
					let checked = true
					value.forEach((element,index) => {
						if (element.checked == true) {
							// num++
							checkedList.push(index)
						}
						if(element.checked == false){
							checked = false
						}
					});
					this.checkedList = checkedList
					this.checked = checked
				},
				deep: true, // 可以深度检测到 obj 对象的属性值的变化
				immediate: true //刷新加载  立马触发一次handler
			},
		},
		computed:{
			title(){
				let title = ''
				switch(this.type)
				{
				    case 1:
				       title = '移除群成员'
				        break;
				    case 2:
				        title = '选择用户'
				        break;
					case 3:
					    title = '接收人'
					    break;
				    default:
					title = '添加群成员'
				}
				return title
			}
		},
		methods:{
			// 是否选中
			checkboxChange(e){
				console.log('e',e)
				if(this.model){
					if(this.radioIndex != null){
						this.list[this.radioIndex].checked = false
						this.list[e.name].checked = e.value
						this.radioIndex = e.name
					}else{
						this.list[e.name].checked = e.value
						this.radioIndex = e.name
					}
				}else{
					this.list[e.name].checked = e.value
				}
			},
			close(e){
				console.log('弹窗收起',this.open)
				// this.open = false
				let params = {
					checkedList:this.checkedList,
					radioIndex:this.radioIndex,
					list:this.list
				}
				this.$emit('peopleAddCloseSubmit',params)
			},
			// 全选
			checkboxChangeAll(e){
				let list = this.list 
				if(e.value){
					list.forEach((element,index) => {
						element.checked = true
					});
				}else{
					list.forEach((element,index) => {
						element.checked = false
					});
				}
				
				this.list = list
			}
			
		}
	}
</script>

<style lang="less">
	.frame{
		width: 750rpx;
		height: 1000rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding-top: 20rpx;
		.frame-title{
			
			font-weight: normal;
			font-size: 36rpx;
			color: #000000;
		}
		
		.submit-frame{
			font-weight: 500;
			font-size: 32rpx;
			color: #0052D9;
			position: absolute;
			right: 32rpx;
		}
		.scroll-frame{
			// background: #000000;
			margin-top: 10rpx;
		}
		.name-text{
			margin-left: 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			flex: 1;
		}
	}
	.checked-frame{
		margin-top: 20rpx;
		margin-left: 15rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
	}
	.icon{
		width: 100rpx;
		height: 100rpx;
		// background: #888888;
		border-radius: 50%;
	}
</style>